<template>
    <div>
        <a-modal
            title="新聘任审评员实习审评评定表打印"
            :visible="visible"
            @ok="visible = false"
            @cancel="closeVisible"
            :footer="null"
            class="internshipAssessment-print-modal"
            :width="794+48+16"
        >
            <div style="width: 794px;">
                <div>
                    <a-button class="blue-btn" type="primary" v-print="printObj">打印</a-button>
                </div>
                <div id="internshipAssessment-print-ID" v-if="visible">
                    <div v-for="(item,index) in printList" :key="index" class="internshipAssessment-print-div">
                        <h1 class="table-title">新聘任审评员实习审评评定表</h1>
                        <table border="1" cellspacing="0" class="table-Lu">
                            <tr>
                                <th>姓&emsp;&emsp;名</th>
                                <td>{{ item.fjcyxm }}</td>
                                <th>工作单位</th>
                                <td> {{ item.fgzdw }} </td>
                            </tr>
                            <tr>
                                <th>审评组长</th>
                                <td>{{ item.fzzxm }}</td>
                                <th>审评类别</th>
                                <td>{{ item.fjclx }}</td>
                            </tr>
                            <tr>
                                <th>审评时间</th>
                                <td>{{ item.fjcsj }}</td>
                                <th>审评单位</th>
                                <td>{{ item.fqymc }}</td>
                            </tr>
                            <tr>
                                <th>审评范围<br/>(品种名称)</th>
                                <td colspan="3" class="text-align-left">
                                    {{ item.fcyjcfw }}
                                </td>
                            </tr>
                            <tr>
                                <th>承担审评任务</th>
                                <td colspan="3" class="text-align-left">
                                    {{ item.fcdjcrw }}
                                </td>
                            </tr>
                            <tr>
                                <td colspan="4">
                                    <p class="text-align-left">实习审评员总结：</p>
                                    <div v-html="processedContent(item.fsxjcyzj)" class="text-align-left" style="text-indent: 36px;"></div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="4">
                                    <p class="text-align-left">审评组长意见：</p>
                                    <div>
                                        <p class="text-align-left" style="text-indent: 36px;">{{ item.fzzyj }}</p>
                                        <div class="yjqm-right-bottom">
                                            <img v-if="item.signature" :src="item.signature" class="yjqmImg"/>
                                            <span v-else class="yjqmImg">{{ item.fzzxm }}</span>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="4" class="text-align-left" style="line-height: 2.5;">
                                    <span>考核结果：</span>
                                    <span style="margin-left: 10px;">{{ item.fpj }}</span>
                                </td>
                            </tr>
                        </table>
                        <p style="padding-left: 1%;text-align: left;">备注：请审评结束后 7 个工作日内将电子版发送至经办人邮箱。</p>
                        <div style="page-break-after:always"></div>
                    </div>
                </div>
            </div>
        </a-modal>
    </div>
</template>
<script>
import {
    downMyQm,
} from './service/index'
import moment from 'moment'
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            moment:moment,
            visible:false,
            printList: [],
            qmImgList: [],
            printObj:{
                id:"internshipAssessment-print-ID", //需要打印的id名称
                popTitle:"新聘任审评员实习审评评定表",//文档的名称
                // preview:true,//预览功能，不好用
                zIndex:'20002',
                beforeOpenCallback(vue){
                    //console.log('打印回调',vue)
                },
                openCallback (vue) {//打开之前
                    //console.log('打开之前',vue)
                },
                closeCallback (vue) {//关闭了打印工具
                    //console.log('关闭了打印工具')
                },
            },
        }
    },
    watch:{

    },
    mounted(){

    },
    methods:{
        getData(val,qmVal){
            this.addPrintStyles()
            this.printList = []
            this.qmImgList = []
            //console.log('打印数据', typeof val,val,qmVal)
            if (Array.isArray(val)) {
                this.printList = val
                //console.log('val 是一个数组');
            } else if (typeof val === 'object' && val !== null) {
                this.printList.push(val)
                //console.log('val 是一个对象');
            } else {
                //console.log('val 不是数组也不是对象');
            }
            // this.qmImgList = qmVal
            //console.log('打印数据',this.printList)
            this.visible = true
        },
        closeVisible(){
            this.visible = false
            this.removePrintStyles()
        },
        processedContent(val) {
            // 使用正则表达式替换掉 <p><br></p>
            const cleaned = val.replace(/<p><br\s*\/?><\/p>/gi, '');
            return cleaned;
        },
        addPrintStyles() {
            // 创建并添加包含@page规则的<style>元素
            this.printStyleElement = document.createElement('style');
            this.printStyleElement.type = 'text/css';
            this.printStyleElement.media = 'print';
            this.printStyleElement.innerHTML = `
                @page {
                    margin-top: 1in;
                    margin-right: 0.5in;
                    margin-bottom: 0.5in;
                    margin-left: 0.5in;
                /* 其他打印样式 */
                }
            `;
            document.head.appendChild(this.printStyleElement);
            //console.log('打印@page',this.printStyleElement)
        },
        removePrintStyles() {
            // 确保printStyleElement存在且已被添加到DOM中
            if (this.printStyleElement && this.printStyleElement.parentNode) {
                this.printStyleElement.parentNode.removeChild(this.printStyleElement);
                this.printStyleElement = null; // 清除引用
            }
        },
    }
}
</script>
<style lang="less">
#internshipAssessment-print-ID {
    .table-title {
        font-family: "FZXiaoBiaoSong-S04S", "方正小标宋简体", sans-serif;
        font-size: 29px;
    }
    .internshipAssessment-print-div {
        text-align: center;
        margin: 0 auto;
        .table-Lu{
            width: 794px;
            margin: 0 auto;
            margin-top: 4mm;
            font-size: 16px;
            table-layout: fixed;
            th {
                font-family: 'SimSun', serif;
                text-align: center;
                font-size: 18px;
                font-weight: bold !important;
                line-height: 1.5;
                padding: 0px;
                color: black;
                width: 140px !important;
            }
            td {
                font-family: 'SimSun', serif;
                min-width: 150px;
                text-align: center;
                line-height: 1.5;
                padding: 0px;
                font-size: 18px;
                color: black;
                word-wrap:break-word;
                word-break:break-all;
                white-space:normal;
                .ant-form-item {
                    margin-bottom: 0px;
                }
            }
        }
        .table-bz {
            font-family: '宋体', sans-serif;
            font-size: 14px;
        }
        .text-align-left {
            text-align: left !important;
            padding-left: 10px !important;
            margin-bottom: 0px !important;
            p {
                margin-bottom: 0px !important;
            }
        }
        .yjqm-right-bottom {
            float: right;
            margin-right: 20px;
            margin-bottom: 10px;
            line-height: 30px;
        }
        .yjqmImg {
            width: 100px;
            height: 30px;
            padding-right: 20px;
        }
    }
}
</style>
